<template>
    <div>
        <Card shadow :padding="16">
            <div class="search-con">
                <Input placeholder="用户名" class="search-input" name="userName" v-model="userName"></Input>
                <Button ref="demo"  type="primary" @click="showInfo">{{$t('query')}}</Button>
                <Button type="success" @click="modal1 = true">{{$t('add')}}</Button>
                <ColPopTip :list="columns1" @setColumn="setColumn"></ColPopTip>
            </div>
            <Table ref="LT" show-summary :summary-method="handleSummary" :loading="loading" :height="tableHeight" stripe border :columns="filterColumns" :data="list" @on-select="select">
                <template slot-scope="{ row }" slot="role">
                    <Tag color="blue">{{ row.role }}</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">{{$t('edit')}}</Button>
                    <Button type="error" size="small" @click="remove(index)">{{$t('delete')}}</Button>
                </template>
            </Table>
            <div style="margin-top: 10px;text-align: right">
                <Page :page-size-opts="[10,20,50,100]" :total="total" @on-change="pageChange" @on-page-size-change="pageSizeChange" size="small" show-elevator show-sizer show-total />
            </div>
        </Card>
<!--        <DetailModal-->
<!--                v-model="modal1"-->
<!--                :width="800"-->
<!--                ok-text="确认"-->
<!--                @on-ok="ok"-->
<!--                :height="100">-->
<!--            <div style="height: 20px;"  slot="content">-->


<!--            </div>-->
<!--        </DetailModal>-->

        <modal v-model="modal1" :mask-closable="false" :width="600" :title="$t('editPage')" @on-ok="modalOk">
            <Form :label-width="80">
                <row>
                  <Col span="12">
                    <FormItem :label="this.$t('userName')">
                        <Input placeholder="Enter your name" style="width: 200px;"></Input>
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem :label="this.$t('realName')">
                        <Input placeholder="Enter your name" style="width: 200px;"></Input>
                    </FormItem>
                  </Col>
                </row>
              <row>
                <Col span="12">
                  <FormItem :label="this.$t('mobile')">
                    <Input placeholder="Enter your name" style="width: 200px;"></Input>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem :label="this.$t('realName')">
                    <Input placeholder="Enter your name" style="width: 200px;"></Input>
                  </FormItem>
                </Col>
              </row>
            </Form>
        </modal>
    </div>
</template>




<script>
    import DetailModal from "../../components/detail-modal";
    import ColPopTip from '../../components/col-poptip'
    import { mixin } from '../../mixins/mixin'

    export default {
        name: "sys-user",
        mixins: [mixin],
        components: {DetailModal,ColPopTip},
        data () {
            return {
              modal1: false,
              queryUrl: 'getUserData',
              showSummary: 1,
              userName: '',
              model: {
                userName: "",
                realName: "",
                sex: "",
                role: "",
                email: "",
                mobile: "",
                date: ""
              }
            }
        },
        methods:{
            showInfo(){

            },
            modalOk(){
              alert("保存数据")
            },
            show(index,row){
            }
        },
        computed : {
            columns1() {
                return [
                    {type: 'selection', width: 60, align: 'center'},
                    {title: this.$t('userName'), key: 'userName'},
                    {title: this.$t('realName'), key: 'realName'},
                    {title: this.$t('sex'), key: 'sex'},
                    {title: this.$t('role'), slot: 'role', key: 'role'},
                    {title: this.$t('email'), key: 'email', minWidth: 150},
                    {title: this.$t('mobile'), key: 'mobile', width: 150,},
                    {title: this.$t('date'), key: 'date', minWidth: 180},
                    {title: this.$t('action'), slot: 'action', width: 150, align: 'center'}
                ]
            }
        },
        mounted() {
        }
    }
</script>

<style lang="less">

    /*.ivu-modal-body{*/
    /*    height: 400px;*/
    /*    overflow: auto;*/
    /*}*/

</style>